<template>
  <el-card>
    <template #header>
      <div style="float: right">
        <el-button @click="saveDataRule" type="primary">提 交</el-button>
      </div>
    </template>
  </el-card>
  <el-scrollbar :height="height">
    <ts-card header="基本信息">
      <el-form :model="form" label-position="left">
        <el-row :gutter="20">
            
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="数据规则ID">
              <el-input v-model="form.id"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="对象名">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="标题">
              <el-input v-model="form.title"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="执行的方法集合">
              <el-select
                v-model="form.matchMethodsArray"
                clearable
                placeholder="请选择："
                multiple
                collapse-tags
                max-collapse-tags="1"
              >
                <el-option
                  v-for="item in configData.methodList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="表名">
              <el-input v-model="form.tableName" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="自动处理数据">
              <el-switch v-model="form.autoHandle" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="引用别的数据规则ID">
              <el-input v-model="form.extendId" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="数据源类型">
              <el-select
                v-model="form.dbService"
                clearable
                placeholder="请选择："
              >
                <el-option
                  v-for="item in configData.dbServiceList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="拦截顺序">
              <el-select
                v-model="form.interceptorOrder"
                clearable
                placeholder="请选择："
              >
                <el-option
                  v-for="item in configData.interceptorOrderList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </ts-card>
    <ts-card header="数据字段列表">
      <template #header>
        <i style="float: right; margin-right: 10px" @click="addDataRule">
          <el-icon>
            <Plus />
          </el-icon>
        </i>
      </template>
      <ts-card
        v-for="(item, index) in dataList"
        :key="index"
        style="margin-bottom: 20px"
      >
        <template #header>
          <span>数据字段{{ index + 1 }}</span>
          <el-button
            style="float: right;margin-right:3px"
            @click="deleteDataRule(index)"
            type="danger"
            :icon="Delete"
            circle
          />
        </template>
        <el-form v-model="dataList[index]" label-position="left">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-form-item label="标识id">
                <el-input v-model="dataList[index].id"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-form-item label="字段属性">
                <el-input v-model="dataList[index].name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-form-item label="标题">
                <el-input v-model="dataList[index].title"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-form-item label="默认值">
                <el-input v-model="dataList[index].defaultValue"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-form-item label="执行的方法集合">
                <el-select
                  v-model="dataList[index].matchMethodsArray"
                  clearable
                  placeholder="请选择："
                  multiple
                  collapse-tags
                  max-collapse-tags="1"
                >
                  <el-option
                    v-for="item in configData.methodList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-form-item label="数据解析规则">
                <el-select
                  v-model="dataList[index].parseType"
                  clearable
                  placeholder="请选择："
                >
                  <el-option
                    v-for="item in configData.parseTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-form-item label="映射其它字段">
                <el-input v-model="dataList[index].mapOtherField"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-form-item label="数据源关联其它Id">
                <el-input v-model="dataList[index].refId"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-form-item label="为数组时元素类型">
                <el-input v-model="dataList[index].arrayEleType"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <el-form-item label="执行条件">
                <el-input v-model="dataList[index].condition"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <el-form-item label="值表达式">
                <el-input v-model="dataList[index].value"></el-input>
              </el-form-item>
            </el-col>


            <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
              <el-form-item label="字段映射的键值">
                <sc-form-table
                  v-model="dataList[index].fieldMap"
                  :addTemplate="paramsTemplate"
                  height="300"
                >
                  <el-table-column label="key">
                    <template #default="scope">
                      <el-input v-model="scope.row.key"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="值">
                    <template #default="scope">
                      <el-input style="width: 100%" v-model="scope.row.value" />
                    </template>
                  </el-table-column>
                </sc-form-table>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <ts-card header="数据集对象设置" style="margin-top: 10px">
          <dataSet
            v-model:formData="dataList[index].dataset"
            :configData="configData"
          ></dataSet>
        </ts-card>
      </ts-card>
    </ts-card>
  </el-scrollbar>
</template>
    <script setup>
import { ref, defineModel, computed, onMounted, inject } from "vue";
import { ElNotification } from "element-plus";
import API from "@/api/model/meta.js";
import { getFormConfig } from "./formConfig";
import { Plus, Delete } from "@element-plus/icons-vue";
import dataSet from "./dataSet.vue";
const emit = defineEmits(["update", "init"]);
const form = defineModel();
const dataList = defineModel("dataList");
const props = defineProps({
  configData: { type: Array, default: [] },
  addTemplate: { type: Object, default: {} },
});
const paramsTemplate = {
  key: "",
  value: "",
};
const fileName = inject("fileName");
const height = computed(() => {
  let h;
  var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
  if (!iOS) {
    h = window.innerHeight;
  } else {
    h = screen.height;
  }
  return h - 145;
});
const addDataRule = () => {
  dataList.value.push(props.addTemplate);
};
const deleteDataRule = (index) => {
  dataList.value.splice(index, 1);
};
const saveDataRule = async () => {
  let param = {
    fileName: fileName.value,
    bean: form.value,
    dataList: dataList.value.map((ele) => {
      delete ele.formConfig;
      return ele
    }),
  };
  let res = await API.businessrule.saveOrUpdateCode.post(param);
  if (res.code == 200) {
    ElNotification.success({
      title: "",
      message: "操作成功！",
      duration: 2000,
    });
    emit("update", { fieldId: res.fieldId });
    emit("init");
  }
};
</script>
    <style lang="less" scoped></style>
    